<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>课程详情</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
	#zbom .back_btn:after{border-color: #fff;}
	#zbom .header{background-color: #4d4d4d;}
	#zbom .Main{background-color: #4d4d4d;}
	#zbom .myVideo{width: 100%;position: relative;top: 50%;transform: translateY(-50%);}
</style>
</head>

<body>

<div v-cloak id="zbom">

	<header class="header">
		<a class="left_icon back_btn"></a>
	</header>
	
	<div class="swiper-container Main" id="Main">
		<div class="swiper-wrapper">
			<div class="swiper-slide content" style="height: 100%;">
				
				<div class="children" style="height: 100%;">
					
					<video class="myVideo" @loadeddata="getPhoto" src="image/test/scene.mp4" controls="controls"></video>
					
				</div>
				
			</div>
		</div>
	</div>
	
</div>


<!--引入模拟数据-->
<script src="data/examData.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

var vm = new Vue({
	el:"#zbom",
	data:{
		swiper:null,
	},
	methods:{
		//获取封面图
		getPhoto:function(e){
			var target = e.currentTarget;
			var myCanvas = document.createElement('canvas');
			myCanvas.width = target.videoWidth;
			myCanvas.height = target.videoHeight;
			myCanvas.style.position = 'relative';
			myCanvas.style.top = '-50%';
			
			var ctx = myCanvas.getContext('2d');
			
			ctx.drawImage(target ,0 ,0 ,myCanvas.width ,myCanvas.height);
			
			var url = myCanvas.toDataURL();
			
			target.poster = url;
		},
	},
	mounted:function(){
		var that = this;
		this.swiper = pullSwiper('#Main');
	}
});


//刷新数据
function refresh(pull){
	pull.innerText = '刷新成功';
};

//加载数据
//function reload(pull){
//	pull.innerText = '已加载全部数据'
//};

</script>

</body>
</html>
